﻿<script id="Wizard-NewStock" type="text/html" data-title="Add Stock" data-width="50%" data-icon="icon-stats">
       
        <div style="padding:20px" data-bind="with: new NewStockWizardViewModel($data)">
            <label>Stock Name</label>
            <div class="input-control text"  data-bind="css: { 'error-state': !StockName.isValid() }">
                <input style="width: 100%" data-bind="kendoAutoComplete:
                {
                    data: DataSource,
                    dataTextField: 'Id',                   
                    value: StockName,
                    template:Html.KendoTemplate('Wizard-NewStock-StockTemplate')
                }" />               

                <button class="btn-clear"></button>
            </div>
            
            <div class="form-actions">
                <button class="button primary" data-bind="click: Add, disable: !StockName.isValid()">Add</button>
                <button class="button" data-bind="click: Cancel">Cancel</button>
            </div>
        </div>
</script>
<script id="Wizard-NewStock-StockTemplate" type="text/html">
    <h4>#: Id #</h4>
    <div>#= Name # </div>
</script>